import React, { useEffect, useState } from 'react';
import { ActivityIndicator, Image, ImageProps, StyleSheet, View } from 'react-native';

interface LazyImageProps extends ImageProps {
    uri: string; // 图片的 URI
    defaultSource: any; // 默认的占位图
    loadingSize?: 'small' | 'large'; // loading 图标的大小
    loadingColor?: string; // loading 图标的颜色
    preload?:boolean ; // 是否启用预加载  默认打开
}

const LazyImage: React.FC<LazyImageProps> = ({ uri, defaultSource, loadingSize = 'small', loadingColor = '#0000ff', preload=true, style, ...rest }) => {
    const [loading, setLoading] = useState(true); // 单独的加载状态

    const [isPreloaded, setIsPreloaded] = useState(false); // 是否预加载完成

    // 动态预加载图片
    useEffect(() => {
        if (preload && uri) {
            Image.prefetch(uri)
                .then(() => {
                    setIsPreloaded(true); // 图片预加载成功
                })
                .catch((err) => {
                    console.error('Image prefetch failed:', err); // 图片预加载失败
                });
        }
    }, [uri, preload]);
    return (
        <View style={styles.container}>
            {loading && (
                <ActivityIndicator
                    style={styles.loadingIndicator}
                    size={loadingSize}
                    color={loadingColor}
                />
            )}
            <Image
                style={[style, loading && { opacity: 0 }]} // 在加载时图片透明
                source={{ uri }}
                defaultSource={defaultSource}
                onLoadStart={() => setLoading(true)}  // 开始加载时显示loading
                onLoadEnd={() => setLoading(false)}   // 加载完成后隐藏loading
                {...rest} // 传递剩余的 props
            />
        </View>
    );
};

const styles = StyleSheet.create({
    container: {
        position: 'relative', // 容器用于包裹图片和 loading
    },
    loadingIndicator: {
        position: 'absolute',
        top: '50%',
        left: '50%',
        marginTop: -10,  // 调整 loading 位置
        marginLeft: -10, // 调整 loading 位置
        zIndex: 1,
    },
});

export default LazyImage;
